<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            var arrs = [
                {"name":"爱奇艺","href":"http://www.aiyiqi.com"},
                {"name":"优酷","href":"http://www.youku.com"},
                {"name":"B站","href":"http://www.bilibili.com"},
                {"name":"A站","href":"http://www.acfun.com"},
                {"name":"乐视","href":"http://www.leshi.com"}
            ];
            $("#btn").click(function(){
                // 创建table
                var table = $("<table style='border:1px solid #ccc;rules:all;'></table>");
                // 添加table
                $("#box").append(table);
                var len = arrs.length; 
                for (var i=0; i < len; i++) {
                    var dt = arrs[i];
                    var tr =  $("<tr></tr>");
                    table.append(tr);
                    var td1 = $("<td>"+dt.name +"</td>");
                    var td2 = $("<td><a href='"+dt.href+"'>"+dt.href+"</a></td>");
                    tr.append(td1);
                    tr.append(td2);
                    tr.mouseenter(function(){
                        // 用this 而不是tr 因为tr是最后一个
                        $(this).css("backgroundColor","green");
                    }).mouseleave(function(){
                        $(this).css("backgroundColor","");
                    });
                }
            });
            $("#btn2").click(function(){
                $("#box").children("table").remove();
            });
            $("#btn3").click(function(){
                var tr = $("<tr><td>腾讯</td><td><a href='http://www.tengxun.com'>http://www.tengxun.com</a></td></tr>");
                $("#box").children("table").append(tr);
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btn" value="显示表格">
    <input type="button" id="btn2" value="移除表格">
    <input type="button" id="btn3" value="添加一行">
    <div id="box"></div>
</body>
</html>